<script lang="ts" setup>
	import { reactive, ref } from "vue";
	import {
		getCurrentInstance
	} from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	const userRole = userStoreInfo.userFlag
	import evalaute from '@/components/evaluate/evaluate.vue'
	let rateValue = ref(1)
	let page = ref(1)
	let current = ref(0)
	let tabsList = ref([{
		name: '差评',
	}, {
		name: '中评',
	}, {
		name: '好评'
	}])
	let dataList = ref()
	let lastList = ref()
	let childComp = ref(null);
	const tabsClick = (e) => {
		lastList.value = []
		current.value = e.index
		fenLei()
	}
	const getList = () => {
		proxy.$req('GET', proxy.$api.getComment, {
			id: userStoreInfo.userInfo.supplier.id,
			pageNo: page.value,
			pageSize: 50
		}).then((res) => {
			console.log(res);
			dataList.value = res.result.page.records
			fenLei()
			rateValue.value = res.result.star
		})
	}
	getList()
	const fenLei = () => {
		let arr = []
		if (current.value == 0) {
			dataList.value.map((item) => {
				if (item.star < 3) {
					arr.push(item)
				}
			})
		} else if (current.value == 1) {
			dataList.value.map((item) => {
				if (item.star == 3) {
					arr.push(item)
				}
			})
		} else {
			dataList.value.map((item) => {
				if (item.star > 3) {
					arr.push(item)
				}
			})
		}
		console.log(arr)
		lastList.value = arr

	}
</script>
<template>
	<view class="evalauteTop">
		<view class="etTit">
			店铺评分
		</view>
		<view class="etRate">
			<text>{{rateValue}}</text>
			<u-rate active-color="#EC9B16" count="5" v-model="rateValue" :readonly="true" size="26"></u-rate>
		</view>
	</view>
	<view class="tabs">
		<u-tabs :list="tabsList" :activeStyle="{
			width:'150rpx',
		        color: '#CB645E',
		        fontWeight: 'bold',
		        transform: 'scale(1.05)',
				textAlign:'center'
		    }" :inactiveStyle="{
				width:'150rpx',
		        color: '#000',
		        transform: 'scale(1)',
				textAlign:'center'
		    }" lineColor="#CB645E" lineWidth="150rpx" @click="tabsClick"></u-tabs>
	</view>
	<view class="evaBox">
		<evalaute ref="childComp" :list="lastList"></evalaute>
	</view>
	<view class="" style="margin-top: 150rpx;" v-if="lastList.length<1">
		<u-empty mode="list">
		</u-empty>
	</view>
</template>
<style lang="scss">
	view {
		box-sizing: border-box;
	}

	page {
		background-color: #fafafa;
	}

	.evalauteTop {
		width: 100%;
		padding: 32rpx 32rpx 0;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 0 auto;

		.etTit {
			font-size: 34rpx;
			font-weight: 600;
		}

		.etRate {
			display: flex;
			align-items: center;
			margin: 30rpx 0;

			text {
				margin-right: 30rpx;
			}
		}
	}

	.tabs {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		margin-top: 32rpx;
	}

	.evaBox {
		width: 686rpx;
		margin: 30rpx auto 0;
		padding: 0 30rpx 30rpx;
		background: #FFFFFF;
		box-shadow: 4rpx 4rpx 6rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
	}
</style>